<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>两栏布局分析</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>上篇：两栏自适应布局的几种实现方法汇总</h1>
  <p class="desc">这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需：【这里有截图】</p>
  <h2>目录</h2>
  <ul class="list">
    <li>简单粗暴float来实现</li>
    <li>absolute"离家出走"定位过去</li>
    <li>圣杯布局 - margin负边距</li>
    <li>高贵优雅flex轻松搞定</li>
    <li>table表示不服气，凭什么我要被抛弃</li>
    <li>衍生 - display:table-cell;</li>
    <li>pc端定死宽？那inline-block携手width也是个好方法</li>
  </ul>
  <p class="desc">案例使用结构如下：</p>
  <pre>
    &lt;div class="cont"&gt;
      &lt;div class="head"&gt;
        &lt;img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="txt"&gt;
        这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需
      &lt;/div&gt;
    &lt;/div&gt;
  </pre>
  <h2><strong>float</strong> - 浮动实现</h2>
  <div class="cont cont-f clearfix">
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
    </div>
  </div>
  <h2><strong>float</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>共同父元素cont需要清除浮动。可使用我们常用的伪元素清除浮动法或者直接利用bfc清除浮动。</li>
    <li>左边图片左浮动float：left、固定宽度、设置margin-right（具体看需求）；</li>
    <li>右边文案自适应、overflow或padding或者margin解除文字环绕效果。注意padding或margin值=左边图片的宽度+二者之间的间距</li>
    <li>如果想要图片和文案是垂直居中的不太好实现</li>
  </ul>
  <p class="tip">
    不过张大神说，这种左右结构的布局使用浮动，是对浮动的一种滥用（大概是这么个意思，也有可能我对其有曲解）。所以还是尽量避免。
  </p>

  <h2><strong>absolute</strong> - 定位实现</h2>
  <div class="cont cont-a">
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
    </div>
  </div>
  <h2><strong>absolute</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>父元素设置relative相对定位以限制图片的绝对定位、因为父元素的高度此时是需要文案高度撑开的，所以需要设置最低高度防止文案过少时父元素低于低于图片高度</li>
    <li>图片使用absolute，"漂浮"起来。如果还想垂直居中，</li>
    <li>右边文案此时只需要怪怪的空开左边图片宽度+间距的位置即可</li>
    <li>可以让左边图片垂直居中：图片用上50%的top+marginTop的负高度一半。原理或其他css3方法详见《垂直居中》</li>
  </ul>
  <p class="tip">
    这样做，遗憾没法做到随着文字的多少让右侧文案自适应地垂直居中。不知道正在观看的大佬你有什么好的方法吗？
  </p>

  <h2><strong>margin负边距</strong> - 圣杯布局</h2>
  <div class="cont cont-m clearfix">
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
    </div>
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
  </div>
  <h2><strong>margin负边距</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>父元素清楚浮动</li>
    <li>两列都float：left</li>
    <li>需要自适应的文案列margin-right等于固定宽度列的图片宽度+二者间距</li>
    <li>有固定宽度的图片列，margin-left负边距为自己的宽度。</li>
  </ul>
  <p class="tip">
    * 适用于可以设置固定宽度的元素在右边的结构
  </p>

  <h2><strong>flex</strong> - 弹性布局</h2>
  <div class="cont cont-flex clearfix">
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。这种样式的结构同样也是我们工作或者去面试时非常常见的。这种样式的结构同样也是我们工作或者去面试时非常常见的。这种样式的结构同样也是我们工作或者去面试时非常常见的。这种样式的结构同样也是我们工作或者去面试时非常常见的。这种样式的结构同样也是我们工作或者去面试时非常常见的。
    </div>
  </div>
  <div class="cont cont-flex clearfix">
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
    </div>
  </div>
  <h2><strong>flex布局</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>父元素设置display:flex;和justify-content:space-bettween;(两端对齐)</li>
    <li>父元素根据需要设置align-item:center;以实现垂直居中</li>
    <li>图片固宽元素不需要特殊设置，宽高即可</li>
    <li>流体文案设置flex:1;自动分配剩余空间。</li>
  </ul>
  <p class="tip">
    轻松弹性，垂直居中不是事儿。推荐阮一峰的flex讲解。
  </p>


  <h2><strong>table</strong> - 表格布局</h2>
  <table class="cont cont-t">
    <tbody>
      <td class="head">
        <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
      </td>
      <td class="txt">
        这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
      </td>
    </tbody>
  </table>

  <h2><strong>table布局</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>结构放到tbale中</li>
    <li>两列分别放到两个td中，固宽的td设置一个宽度即可</li>
    <li>二者间距使用任何一个td设置左或右边距即可。</li>
    <li>同样实现了垂直居中布局</li>
  </ul>
  <p class="tip">
    这结构嵌套也太多了吧，不过少了很多样式表现。
  </p>

  <h2><strong>table-cell</strong> - 伪表格布局</h2>
  <div class="cont cont-tc clearfix">
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
    </div>
  </div>
  <h2><strong>table-cell布局</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>父元素display:table;(自己测试不设置这一条也可以)</li>
    <li>两列都设置display:table-cell;[w3c:此元素会作为一个表格单元格显示（类似td 和 th）]</li>
    <li>别忘了两列之间的间隙，我比较喜欢用文字的左padding隔开。</li>
    <li>如果需要垂直居中可以两列都设置vertical-align:middle;</li>
  </ul>
  <p class="tip">
    这种也可以实现垂直居中布局。
  </p>


  <h2>如果是pc端非自适应的布局，那么<strong>固定宽度</strong>也未尝不是一个好方法。</h2>
  <div class="cont cont-w">
    <div class="head">
      <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
    </div>
    <div class="txt">
      这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。这种样式的结构同样也是我们工作或者去面试时非常常见的。很有必要掌握以备不时之需。
    </div>
  </div>
  <h2><strong>固定宽度非自适应布局</strong>实现<strong>关键点</strong>解析</h2>
  <ul class="list">
    <li>
      没什么特殊性，一般都根据设计稿实现即可。不再列举实现方式。
    </li>
    <li>垂直居中布局-两列都这么设置：</li>
    <li>
      display: inline-block;
    </li>
    <li>

      vertical-align: middle;
    </li>
  </ul>
  <p class="tip">

  </p>

  <h2>
    最后，这些都是自己照着设计稿现撸的不成熟的实现条件，具体工作中用的方法也就其中两三个。对于这几种方案的兼容性或者坑点没有完整深入的研究。欢迎遇到过坑的你提个成熟的建议。

  </h2>
  <!-- ----------------------------- -->
  <h1>下篇：常见的两栏布局案例及分析</h1>
  <h2>第一种：左边头像固定宽度，右边文案自适应宽度</h2>
  <p class="desc">结构如下</p>
</body>

</html>